<template>
  <div class="dm" :style="{height:pageHeight+'px'}">
    <div class="dm-left" :style="{width:leftWidth+'px'}" v-loading="dataRowsLoading">
        <span class="coc-tree-node coc-tree-actions">
          <span>
            <a-input-search v-model="queryParams.keywords" allowClear
                            placeholder="关键字检索"
                            style="margin: 8px 10px;width: 150px;"
                            @search="doSearch"
            />
          </span>
          <span>
            <a-button-group v-if="showCheckbox">
              <a-button icon="undo" @click.stop="doUncheck" title="取消多选" />
              <a-button :disabled="getCheckedKeys().length==0" icon="delete"  @click="doDelete()" title="删除选中的数据" />
            </a-button-group>
            <a-button-group v-else>
              <a-button icon="check-circle" @click.stop="showCheckbox=true" title="多选：批量删除字典分类、字典、字典项等" />
              <a-button icon="plus-circle" @click.stop="doAdd(null, 'folder')" title="新增字典分类" />
            </a-button-group>
          </span>
        </span>
        <div class="dm-left-data" :style="{height:pageHeight-45+'px'}">
          <Tree ref="tree" :data="dataRows" node-key="key" empty-text="暂无数据" draggable highlight-current
                :expand-on-click-node="false" :default-expanded-keys="expandedKeys"
                :show-checkbox="showCheckbox" :check-on-click-node="showCheckbox" check-strictly
                @node-drop="doDrop" @node-click="doSelect" @node-expand="doExpand" @node-collapse="doCollapse"
          >
            <span class="coc-tree-node" slot-scope="{ node, data }">
              <span>
                <a-icon v-if="data.category=='folder'" type="folder-open" theme="twoTone" />
                <a-icon v-if="data.category=='dic'" type="copy" theme="twoTone" />
                <a-icon v-if="data.category=='item'" type="file" theme="twoTone" />
                {{ node.label }}
              </span>
              <span class="btns">
                <a-button v-if="data.category=='folder'" icon="plus" size="small" @click.stop="doAdd(data, 'dic')" title="新增字典" />
                <a-button v-if="data.category=='dic'" icon="plus" size="small" @click.stop="doAdd(data, 'item')" title="新增选项" />
              </span>
            </span>
          </Tree>
        </div>
    </div>
    <div class="dm-right" :style="{width:rightWidth+'px'}">
      <component :is="formView" :pageParams="formParams" :pageHeight="pageHeight" :pageWidth="rightWidth" @onSuccess="doFormSuccess" @onClose="doFormClose" />
    </div>
  </div>
</template>
<script>
import DataTreeUtils from '@/utils/DataTreeUtils'

import EditFolderForm from './editFolder.vue'
import EditDicForm from './editDic.vue'
import EditItemForm from './editItem.vue'

export default {
  mixins: [DataTreeUtils],
  data() {
    return {
      dataRowsQueryUrl: '/jsofted/dic/tree',
      dataRowsDeleteUrl: '/jsofted/dic/delete/',
      dataRowsUpdateUrl: '/jsofted/dic/update/',
      dataRowsSortUrl: '/jsofted/dic/sort',
      formView: EditFolderForm,
    }
  },
  methods: {
    _doSelect(node) {
      if (!node) {
        this.formParams = {}
        this.formView = EditFolderForm
        return
      }
      this.formParams = {
        id: node.id
      }
      switch (node.category) {
      case 'folder':
        this.formView = EditFolderForm
        break
      case 'dic':
        this.formView = EditDicForm
        break
      case 'item':
        this.formView = EditItemForm
        break
      }
    },
    doDrop(dragNode, dropNode, position) {
      const dragData = dragNode.data
      const dropData = dropNode.data
      // console.log('doDrop: position = %s, dropData = %s', position, dropData.category)
      switch(dragData.category) {
      case 'folder': // 拖拽【分类节点】
        if (position === 'inner'
            || dropData.category !== 'folder') {
          this.$message.error('拖动失败！【分类节点】只能是根节点。')
          this.init();
          return false;
        }
        break;
      case 'dic': // 拖拽【字典节点】
        if ((position === 'inner' && dropData.category !== 'folder')
            || (position !== 'inner' && dropData.category !== 'dic')) {
          this.$message.error('拖动失败！【字典节点】只能在【分类节点】里面。')
          this.init();
          return false;
        }
        break;
      case 'item':
        if ((position == 'inner' && dragData.parentId !== dropData.id)
            || dragData.parentId !== dropData.parentId){
          this.$message.error('拖动失败！【字典项节点】只能在【字典节点】里面。')
          this.init();
          return false;
        }
        break;
      default:
        return false
      }
      this.move(dragNode.data, dropNode.data, position)
    },
    doAdd(parentData, type) {
      if (type === 'folder') {
        this.formView = EditFolderForm
      } else if (type === 'dic') {
        this.formView = EditDicForm
      } else if (type === 'item') {
        this.formView = EditItemForm
      } else {
        this.formView = EditFolderForm
      }
      this._doAdd(parentData)
    },
    _doAdd(parentData) {
      if (parentData) {
        this.currentNodeKey = parentData.key
        this.$refs.tree.setCurrentKey(this.currentNodeKey)
        this.formParams = {
          parentId: parentData.id,
          parentName: parentData.fullName || parentData.name,
          type: parentData.type,
        }
      } else {
        this.currentNodeKey = ''
        this.$refs.tree.setCurrentKey(null)
        this.formParams = {}
      }
    },
  }
}
</script>
